<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书信息列表</title>
</head>
<body>
<a th:href="@{/book/addBook}">添加新书</a>

<table border="1">
    <tr>
        <td></td>
        <td>编号</td>
        <td>书名</td>
        <td>价格</td>
        <td>类目</td>
        <td>库存</td>
        <td>图片</td>
        <td>说明</td>
        <td>作者</td>
        <td>已售</td>
        <td>操作</td>
    </tr>
    <form th:action="@{/book/del}" method="post" onsubmit="return submitForm()">
        <tr th:each="book:${page.list}">
            <td><input type="checkbox" name="ids" th:value="${book.id}"></td>
            <td th:text="${book.id}"></td>
            <td th:text="${book.name}"></td>
            <td th:text="${book.price}"></td>
            <td th:text="${book.category}"></td>
            <td th:text="${book.pnum}"></td>
            <td th:text="${book.imgurl}"></td>
            <td th:text="${book.description}"></td>
            <td th:text="${book.author}"></td>
            <td th:text="${book.sales}"></td>
            <td><a th:href="@{/book/toUpdate(id=${book.id})}">修改</a></td>
        </tr>
        <input type="submit" value="删除"  onsubmit="return submitForm()">
    </form>
</table>

<br/>
总页数：<span th:text="${page.pages}"></span>
总记录数：<span th:text="${page.total}"></span>
页面尺寸：<span th:text="${page.pageSize}"></span>
当前页记录数：<span th:text="${page.size}"></span>
<span th:if="${page.hasPreviousPage}">
    <a th:href="@{/book/page(pageNum=${page.pageNum -1})}">上一页</a>
</span>&nbsp;&nbsp;
<span th:each="p:${page.navigatepageNums}">
    <a th:href="@{/book/page(pageNum=${p})}" th:text="${p}"></a>
</span>
<span th:if="${page.hasNextPage}">
    <a th:href="@{/book/page(pageNum=${page.pageNum+1})}">下一页</a>
</span>
</body>
<script src="/js/jquery-1.8.3.min.js"></script>
<script>
    function submitForm() {
        if ($("input[name='ids']:checked").length === 0) {
            alert("必须选择一个记录删除")
            return false
        }
        if (!confirm("确定要删除吗？")) {
            alert("已取消删除")
            return false
        }
    }
</script>
</html>